<template>
    <div class="floors">
        <div class="py-container">
            <div class="title clearfix">
                <!-- 楼层的名字 -->
                <h3 class="fl">{{ floor.name }}</h3>
                <!--右上角导航栏-->
                <div class="fr">
                    <el-tabs>
                        <el-tab-pane v-for="(nav, index) in floor.navList" :key="index" :label="nav.text">
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 楼层的主要内容 -->
            <div class="tab-content">
                <div class="tab-list">
                    <!-- 每一个关键词 -->
                    <div class="list-left">
                        <ul class="ul-list">
                            <li v-for="(keyword, index) in floor.keywords" :key="index">{{ keyword }}</li>
                        </ul>
                        <img :src="floor.imgUrl" style="width: 100%;" />
                    </div>

                    <div class="list-center">
                        <!-- 轮播图区域 -->
                        <el-carousel :interval="3000">
                            <el-carousel-item v-for="carouse in floor.carouselList" :key="carouse.id">
                                <img :src="carouse.imgUrl" alt="">
                            </el-carousel-item>
                        </el-carousel>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

                    <div class="split">
                        <span class="floor-x-line"></span>
                        <div class="floor-conver-pit">
                            <img :src="floor.recommendList[0]" />
                        </div>
                        <div class="floor-conver-pit">
                            <img :src="floor.recommendList[1]" />
                        </div>
                    </div>
                    <div class="split center">
                        <img :src="floor.bigImg" />
                    </div>
                    <div class="split">
                        <span class="floor-x-line"></span>
                        <div class="floor-conver-pit">
                            <img :src="floor.recommendList[2]" />
                        </div>
                        <div class="floor-conver-pit">
                            <img :src="floor.recommendList[3]" />
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>




<script lang="js">
//  import { mapState } from "vuex";
export default {
    name: "FloorIndex",
    data() {
        return {};
    },

    props: ['floor', 'index']
};
</script>

<style lang="less" scoped>
@import "./floor.css";

.split {
    width: 220px;
    height: 100%;
    position: relative;

    .floor-x-line {
        position: absolute;
        background: #e4e4e4;
        width: 220px;
        height: 1px;
        top: 180px;
    }

    .floor-conver-pit {
        width: 100%;
        height: 50%;

        img {
            width: 100%;
            height: 100%;
            transition: all 400ms;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

.center {
    border: 1px solid #e4e4e4;
}
</style>